<template>
  <div class="bw-com-bank-container" ref="comGroup" :id="receivClass">
    <template v-for="item in comList" :key="item.key">
      <div class="bw-com-group-box">
        <div class="bw-com-group-head">
          <span class="group-text"> {{ item.group }}</span>
        </div>

        <template v-if="Array.isArray(item.coms)">
          <ul :class="['bw-com-list', receivClass]">
            <template v-for="com in item.coms" :key="com.comKey">
              <li
                :comType="com.type"
                :comCode="com.comKey"
                :comName="com.comName"
                :appCode="com.appCode"
                :appId="com.appId"
                :isDrag="com.isDrag"
                :class="[
                  'bw-com-item',
                  com.isDrag ? 'bw-design-drag-item' : 'com-ignore-item',
                ]"
              >
                <Icon :icon="com.icon" class="bw-com-icon" />
                <span>{{ com.comName }}</span>
              </li>
            </template>
          </ul>
        </template>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { useComGroup } from './util'

import type { BwComGroupModel } from '../model'
interface BwComGroupProps {
  comList: Array<BwComGroupModel>
  receivClass: string
}

const emit = defineEmits([])
const props = withDefaults(defineProps<BwComGroupProps>(), {
  comList: () => [],
})

const { comGroup, initSortable } = useComGroup(props, emit)
defineExpose({ initSortable })
</script>

<style lang="less" scoped>
.bw-com-bank-container {
  width: 100%;

  .bw-com-group-box {
    width: 100%;
    height: auto;

    .bw-com-group-head {
      display: flex;
      height: 32px;
      padding: 0 8px;
      align-items: center;
      width: calc(100% - 16px);
      justify-content: space-between;

      .group-text {
        font-weight: 600;
      }
    }

    .bw-com-list {
      display: flex;
      flex-wrap: wrap;
      padding: 0 8px;
      align-items: center;
      width: calc(100% - 16px);
      justify-content: space-between;

      .bw-com-item {
        padding: 6px 8px;
        margin: 4px 0;
        width: (50% - 8px);
        border-radius: 5px;
        list-style: none;
        border: 1px solid #e8e8e8;

        .bw-com-icon {
          margin-right: 5px;
        }
      }

      .bw-design-drag-item {
        cursor: pointer;

        &:hover {
          color: #0960bd;
          border: 1px solid #0960bd;
        }
      }

      .com-ignore-item {
        cursor: no-drop;
        color: rgba(146, 128, 128, 0.582);
        background-color: rgba(0, 0, 0, 0.08);
      }
    }
  }
}
</style>
